<script setup>
import { computed } from 'vue'
const props = defineProps({
    filterable: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    clearable: {
        type: Boolean,
        default: true
    },
    // 禁用选择器
    disabled: {
        type: Boolean,
        default: false
    },
    options: {
        type: Array,
        default: () => []
    },
    selectProps: {
        type: Object,
        default: () => ({
            label: 'label',
            value: 'value'
        })
    },
    modelValue: {
        type: [String, Number, Array],
        default: ''
    },
    full: {
        type: Boolean,
        default: false
    },
    inputWidth: {
        type: String,
        default: '220px',
        validator: (value) => value.includes('px')
    },
    // 多选配置
    multiple: {
        type: Boolean,
        default: false
    },
    collapseTags: {
        type: Boolean,
        default: false
    },
    collapseTagsTooltip: {
        type: Boolean,
        default: false
    },
    maxCollapseTags: {
        type: Number,
        default: 1

    }
})

const emit = defineEmits(['update:modelValue', 'change'])
const selectOptions = (val) => {
    emit('update:modelValue', val)
    emit('change', val)
}
const selectStyle = computed(() => ({ 'width': props.inputWidth }))
</script>

<template>
    <el-select :filterable="filterable" :model-value="modelValue" :placeholder="placeholder" :clearable="clearable"
        :multiple="multiple" :collapse-tags="collapseTags" :collapse-tags-tooltip="collapseTagsTooltip"
        :max-collapse-tags="maxCollapseTags" :disabled="disabled" @change="selectOptions"
        :class="[full ? 'full-box-class' : '']" :style="selectStyle">
        <el-option v-for="item in options" :key="item[selectProps.value]" :label="item[selectProps.label]"
            :value="item[selectProps.value]" :disabled="item.disabled" />
    </el-select>
</template>

<style scoped lang="scss">
.full-box-class {
    width: 100% !important;
}
</style>